<template>
  <div v-if="isXRich" :class="disabled ? 'mydispk' : ''" :style="{height: `${attrs.height + 44}px`}">
    <quill-editor
      ref="XRichText"
      v-model="dataValue"
      :options="editorOption"
      :style="{height: `${attrs.height}px`}"
      @change="valueChange(dataValue)"
      @focus="onEditorFocus($event)"
    >
      <!-- 自定义toolar -->
      <div slot="toolbar" :id="editorOption.modules.toolbar.container.substring(1, 50)">
        <!-- Add a bold button -->
        <button class="ql-bold" title="加粗">Bold</button>
        <button class="ql-italic" title="斜体">Italic</button>
        <button class="ql-underline" title="下划线">underline</button>
        <button class="ql-strike" title="删除线">strike</button>
        <button class="ql-header" value="1" title="标题1" />
        <button class="ql-list" value="ordered" title="有序列表" />
        <select class="ql-header" title="段落格式">
          <option selected>段落</option>
          <option value="1">标题1</option>
          <option value="2">标题2</option>
          <option value="3">标题3</option>
          <option value="4">标题4</option>
          <option value="5">标题5</option>
          <option value="6">标题6</option>
        </select>
        <select class="ql-size" title="字体大小">
          <option value="10px">10px</option>
          <option value="12px">12px</option>
          <option value="14px">14px</option>
          <option value="16px" selected>16px</option>
          <option value="18px">18px</option>
          <option value="20px">20px</option>
        </select>
        <select class="ql-font" title="字体">
          <option value="SimSun">宋体</option>
          <option value="SimHei">黑体</option>
          <option value="Microsoft-YaHei">微软雅黑</option>
          <option value="KaiTi">楷体</option>
          <option value="FangSong">仿宋</option>
          <option value="Arial">Arial</option>
        </select>
        <!-- Add subscript and superscript buttons -->
        <select class="ql-color" value="color" title="字体颜色" />
        <select class="ql-align" value="align" title="对齐" />
        <button class="ql-clean" title="还原" />
        <button class="ql-image" title="照片" />
        <button class="ql-emig" title="表情" />
      </div>
    </quill-editor>
  </div>
</template>
<script type="text/javascript">
import {
  Quill,
  quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 引入font.css
import './styles/font.css'

import XMixIn from './XMixIn'

// 自定义字体大小
const Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
Quill.register(Size, true)

// 自定义字体类型
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
  '宋体', '黑体'
]
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)
export default {
  mixins: [XMixIn],
  components: { quillEditor },
  data () {
    return {
      isXRich: false,
      editorOption: {
        placeholder: '',
        theme: 'snow', // or 'bubble'
        modules: {
          toolbar: {
            container: `#rl${this.generateUUID()}`
          }
        }
      }
    }
  },
  created () {
    if (this.attrs.height === undefined) {
      this.attrs.height = 300
    }
    if (typeof this.attrs.height !== 'number') {
      let pxIndex = this.attrs.height.indexOf('px')
      if (pxIndex > -1) {
        this.attrs.height = parseInt(this.attrs.height.substring(0, pxIndex))
      }
    }
    this.refreshRich()
  },
  methods: {
    onEditorFocus (event) {
      if (this.disabled) {
        event.enable(false)
      } // 获得焦点事件
    },
    generateUUID () {
      let d = new Date().getTime()
      if (window.performance && typeof window.performance.now === 'function') {
        d += performance.now() // use high-precision timer if available
      }
      let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        let r = (d + Math.random() * 16) % 16 | 0
        d = Math.floor(d / 16)
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
      })
      return uuid
    },
    refreshRich () {
      this.isXRich = false
      this.$nextTick(() => {
        this.isXRich = true
      })
    }

  }
}
</script>
<style>
/** 调整textarea输入 */
.mydispk .ql-snow + .ql-container.ql-snow {
  background-color: #f5f7fa;
}
.ql-snow .ql-picker {
  line-height: 24px;
}
</style>
